<!-- 头部 -->
<template>
  <div class="right-bottom u-p-t-10">
    <div class="right-bottom-box u-rela">
      <h2 class="policeTitle"><span>当日各年级报警处理率</span></h2>
      <div class="region-echarts" style="height: 100%;" v-if="pageflag">
        <Echart
          :options="regionOptions"
          id="regionChart"
          class="region-echarts_center"
        ></Echart>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
    dataVal:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  watch:{
    dataVal:{
      handler:function(val){
        if(val){
          this.getData(this.dataVal)
        }
      },
      deep:true,
    }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
    };
  },

  mounted() {
    // this.getDataHandler();
  },
  methods: {
    async getDataHandler(){
      let { data } = await this.$http.get('/police_center/getTodayResortHandle')
      try{
        if ( data.code === 0 ) {
          this.getData(data.data)
        }
      } catch {
        console.log('error')
      }
    },
    getData(data) {
      const titleData= data.map(iv=> {return {
        name:iv.title,
        max:100
      }})
      const newData = data.map(iv=> {return  Number( iv.resort_handle_rate.replace('%','') ) })
      this.pageflag=true
      this.init(newData,titleData);
    },
    init(newData,titleData) {
      // 区域分布
      this.regionOptions = {
        // tooltip: {
        //   trigger: "axis",
        // },
        radar: {
          // shape: 'circle',
          radius: "75%",
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitNumber: 8,
          indicator: titleData
          
        },
        series: [
          {
            name: "xxx",
            type: "radar",
            data: [
              {
                value: newData,
              },
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value + "%";
              },
              color: "#07687E",
              align: "right",
              distance: 10,
            },
            symbolSize: [6, 6],
            itemStyle: {
              borderWidth: 1,
              color: "#1DE4E4",
              borderColor: "#1DE4E4",
            },
            areaStyle: {
              color: "#07687E",
              // opacity: 0.6,
            },
          },
          {
            type: "radar",
            data: [new Array(newData.length).fill(100)],
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            itemStyle: {
              color: "#08243B",
            },
          },
          {
            type: "radar",
            data: [new Array(newData.length).fill(90)],
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            itemStyle: {
              color: "#082941",
            },
          },
          {
            type: "radar",
            data: [new Array(newData.length).fill(80)],
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            itemStyle: {
              color: "#083653",
            },
          },
          {
            type: "radar",
            data: [new Array(newData.length).fill(70)],
            symbol: "none",
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: "#062B3D",
              // opacity: 0.2,
            },
          },
          {
            type: "radar",
            data: [new Array(newData.length).fill(55)],
            symbol: "none",
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: "#054053",
              // opacity: 0.3,
            },
          },
        ],
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.right-bottom {
  width: 100%;
  height: 100%;

  &-box {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
